<template>
<el-dialog class="save-copy" :append-to-body="true" :title="saveCopy.title" :visible.sync="saveCopy.show" width="470px" :close-on-click-modal="false">
    <el-form ref="saveCopy" :model="saveCopy.form" :rules="rules" label-width="90px" @submit.native.prevent>
        <el-form-item class="my-form-item" label="">平台实验为实时保存，保存副本为保存此刻实验的所有信息快照，可在查看副本里打开查看及编辑。</el-form-item>
        <el-form-item label="名称" prop="snapshotName">
            <el-input :maxlength="64" clearable placeholder="请输入副本名称" v-model="saveCopy.form.snapshotName"></el-input>
        </el-form-item>
        <el-form-item label="描述">
            <el-input :maxlength="100" type="textarea" :rows="5" clearable placeholder="请输入副本描述" v-model="saveCopy.form.description"></el-input>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="saveCopy.show=false">取 消</el-button>
      <el-button type="primary" v-preventReClick="2000" @click="handleSave">确 定</el-button>
    </span>
</el-dialog>
</template>

<script>
export default {
    name: 'SaveCopy',
    props: {
        saveCopy: {
            type: Object,
            required: true
        }
    },
    data () {
        return {
            rules: {
                snapshotName: [{
                    required: true,
                    message: '请输入副本名称',
                    trigger: 'blur'
                }]
            }
        }
    },
    watch: {
        saveCopy: {
            handler (a) {
                if (!a.show) {
                    let obj = this.$refs['saveCopy']
                    obj && obj.resetFields()
                }
            },
            deep: true
        }
    },
    methods: {
        handleSave () {
            this.$refs['saveCopy'].validate((valid) => {
                if (valid) {
                    this.$emit('save', this.saveCopy.form)
                } else {
                    return false
                }
            })
        }
    }
}
</script>

<style lang="less">
.save-copy {
    .el-input {
        width: 320px !important;
    }

    .el-textarea__inner {
        width: 320px !important;
    }
    .my-form-item {
        margin-left: -40px;
        width: 455px;
    }
}
</style>
